<template>
	<!-- 订单中心 -->
	<view class="wp">
		<view class="nav_bar">
			<view class="bg">
				<view class="flex_center search_con">
					<uni-search-bar radius="30" v-model="keyword" placeholder="请输入订单号/商品名" clearButton="auto"
						cancelButton="none" @confirm="searchLineup" @clear="searchLineup('')" />
				</view>
				<view class="bar2 barDuo">
					<view v-for="item,i in typeList" :key="i" class="cate" :class="{'active':typeIdx===i}"
						@click="changeType(i)">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="body">
			<three-order :list.sync="list" :isloading="isloading" :ismore="ismore"></three-order>
		</view>
	</view>
</template>

<script>
	import threeOrder from './components/three-order.vue'; //三方订单
	export default {
		components: {
			threeOrder
		},
		data() {
			let date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				timeV = year + '-' + month,
				timeVstr = year + '年' + month + '月';
			return {
				page: 0,
				list: [],
				keyword: '',
				ismore: true,
				isloading: false,
				beginlineup: '',
				typeIdx: 0,
				typeList: [{
					name: '全部',
					type: ''
				},{
					name: '已付款',
					type: 1
				}, {
					name: '已发货',
					type: 2
				}, {
					name: '已完成',
					type: 3
				}]
			}
		},
		onLoad() {
			this.getThreeorderList();
		},
		onReachBottom() {
			this.getThreeorderList();
		},
		methods: {
			search() {
				this.getThreeorderList();
			},
			changeType(val) {
				this.typeIdx = val
				this.page = 0;
				this.list = [];
				this.getThreeorderList()
			},
			searchLineup(v) {
				if (v != '') {
					if (this.keyword == '') {
						return this.$api.msg('请输入订单号/店铺名/商品名');
					}
				} else {
					this.keyword = v;
				}
				this.page = 0;
				this.list = [];
				this.getThreeorderList();
			},
			// 三方订单
			getThreeorderList() {
				this.page++;
				this.isloading = true;
				this.ismore = true;
				let url = '';
				this.$axios('Order/display', "POST", 'douyin', {
					page: this.page,
					keyword: this.keyword,
					status:this.typeList[this.typeIdx].type,
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.list = [...this.list, ...res.data.data.list];
						this.ismore = res.data.data.list.length > 0;

					}
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #FBF8FE;
	}

	.wp {
		background: #FBF8FE;
		padding-bottom: 60rpx;
	}
	.nav_bar {
		position: fixed;
		width: 100%;
		z-index: 100;
		background: linear-gradient(180deg, #4B05A7 0%, #8615E1 45%, #FBF8FE 100%);
		.bar2 {
			border: none;
			line-height: 75upx;
			font-weight: normal;
			display: flex;
			text-align: center;
			padding: 4rpx 20rpx 26rpx;

			.cate {
				position: relative;
				height: 58rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				line-height: 58rpx;
				color: #333333;
				font-size: 24rpx;
				white-space: nowrap;
				width: 22%;
			}

			.active {
				background: linear-gradient(90deg, #9736E5 0%, #4B05A7 100%);
				color: #FFFFFF;
			}

			.round {
				right: 0;
			}
		}

		.barDuo {
			justify-content: space-between;
		}
		.search_con {
			width: 100%;

			.uni-searchbar {
				width: 720rpx;
			}
		}
	}

	.body {
		padding-top: 200rpx;
	}
</style>